<template>
  <view class="tabbar">
    <view class="main">
      <view
        class="main-item"
        v-for="(_, index) in tabbarJson"
        :key="index"
        @click="() => go(_.pageUrl)"
      >
        <image v-if="index === currentIndex" :src="_.activeBarImage"></image>
        <image v-else :src="_.barImage"></image>
        <view>{{ _.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tabbar",
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabbarJson: [
        {
          name: "工作简讯",
          pageUrl: "../work_news/work_news",
          barImage: "../../static/tabar/new.png",
          activeBarImage: "../../static/tabar/new-s.png",
        },
        // {
        //   name: "求救援助",
        //   pageUrl: "../help/help",
        //   barImage: "../../static/tabar/help.png",
        //   activeBarImage: "../../static/tabar/help-s.png",
        // },
        {
          name: "最新任务",
          pageUrl: "../new_task/new_task",
          barImage: "../../static/tabar/help.png",
          activeBarImage: "../../static/tabar/help-s.png",
        },
        {
          name: "心理咨询",
          pageUrl: "../xinli_zixun/xinli_zixun",
          barImage: "../../static/tabar/mind.png",
          activeBarImage: "../../static/tabar/mind-s.png",
        },
        {
          name: "个人中心",
          pageUrl: "../mine/mine",
          barImage: "../../static/tabar/mine.png",
          activeBarImage: "../../static/tabar/mine-s.png",
        },
      ],
    };
  },
  methods: {
    go(url) {
      uni.navigateTo({ url });
    },
    tabChange(index) {
      if (index === this.current) {
        return;
      }
      this.current = index;
      this.$emit("tabChange", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

.main {
  width: 100%;
  height: 140rpx;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
}

.main .main-item {
  font-size: 30rpx;
  margin: auto;
  text-align: center;
  color: #3f3737;
}

.main-item image {
  width: 50rpx;
  height: 50rpx;
}
</style>
